<template>
  <div class="userInfo">
    <el-dropdown trigger="hover" @command="onCommad" style="margin-right: 20px">
      <span class="el-dropdown-link fontWhiteColor">
        <span style="font-size: 18px">{{ userName }}</span>
        <i class="iconfont icon-xiala tip"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="secrecy">
            <el-icon>
              <Service />
            </el-icon>设置密保</el-dropdown-item>
          <el-dropdown-item command="editPwd"><el-icon>
              <Unlock />
            </el-icon>修改密码</el-dropdown-item>
          <el-dropdown-item command="logout"><el-icon>
              <SwitchButton />
            </el-icon>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div class="timeformat">
      <div style="font-size: 35px">{{ times }}</div>
      <div class="date-weekday">
        <span> {{ date }}</span>
        <span> {{ weekdays }}</span>
      </div>
    </div>

    <editPassword ref="editPassword"></editPassword>
    <secrecySetting ref="secrecySetting"></secrecySetting>
  </div>
</template>

<script>
import editPassword from '@/views/system/editPassword.vue'
import secrecySetting from '@/components/secrecySetting.vue'

import { sysLogout } from '@/api/request'
export default {
  name: 'VAWAvatar',
  components: { editPassword, secrecySetting },
  data() {
    return {
      createBy: localStorage.getItem('createBy'),
      currentTime: new Date(),
      userName: '',
    }
  },
  created() {
    this.updateTime()
  },
  mounted() {
    this.userName = localStorage.getItem('userName')
  },
  computed: {
    times() {
      return this.moment(this.currentTime).format('HH:mm')
    },
    date() {
      return this.moment(this.currentTime).format('YYYY/MM/DD')
    },
    weekdays() {
      return this.moment(this.currentTime).locale('zh-cn').format('dddd')
    },
  },
  methods: {
    updateTime() {
      setInterval(() => {
        this.currentTime = new Date()
      }, 1000) // 每秒更新一次时间
    },
    onCommad(command) {
      switch (command) {
        case 'editPwd':


          this.$refs.editPassword.openDialog()
          // this.onPersonalCenter()
          break
        case 'logout':
          this.onLogout()
          break
        case 'secrecy':
          this.$refs.secrecySetting.openDialog()
          break
      }
    },
    // 前往个人中心
    onPersonalCenter() {
      this.$router.push({ path: '/personal' })
    },
    // 退出登录
    onLogout() {
      this.$confirm('是否要退出登录？', '提示', {
        confirmButtonText: '确定',
        confirmButtonClass: 'confirm_btn-class ',
        cancelButtonText: '取消',
      })
        .then(() => {
          sysLogout()
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.message,
                  type: 'success',
                })
                localStorage.removeItem('path')
                localStorage.removeItem('accountId')
                localStorage.removeItem('X-Access-Token')
                this.$router.push('/')
              } else {
                this.$message.error(res.data.message)
              }
            })
            .catch((err) => { })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出',
          })
        })
    },
  },
  beforeDestroy() {
    if (this.updateTimeInterval) {
      clearInterval(this.updateTimeInterval)
    }
  },
}
</script>

<style lang="less">
.el-dropdown-link {
  cursor: pointer;
}

.el-icon-arrow-down {
  font-size: 12px;
}

// 单独给这个按钮设置样式
// $confirm中的按钮 是vue的组件 不具备组件的一些特性 所以不生效也是必然
// 那么只能将样式放全局，在当前组件加上一段不带scoped的style
.confirm_btn-class {
  background-color: var(--menuItemHoverBackgroundColor) !important;
  border-color: var(--menuItemHoverBackgroundColor) !important;
}

.userInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeformat {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;

  .date-weekday {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 10px;

    // 字体样式改为宋体
    // 文字左对齐
    span {
      font-size: 16px;
      font-family: 'jiansong' !important;
    }
  }
}
</style>
